<template>
  <div class="checkbox">

    <SkyCardPanel title="多选框">
      <div slot="main">
        <SkyCheckboxGroup label="产品种类" v-model="checkList1">
          <SkyCheckbox label="全部" value="0"></SkyCheckbox>
          <SkyCheckbox label="天猫" value="1"></SkyCheckbox>
          <SkyCheckbox label="淘宝" value="2"></SkyCheckbox>
          <SkyCheckbox label="钉钉" value="3"></SkyCheckbox>
          <SkyCheckbox label="支付宝" value="4"></SkyCheckbox>
        </SkyCheckboxGroup>
        <SkyCheckboxGroup label="产品状态" v-model="checkList2">
          <SkyCheckbox label="全部" value="0"></SkyCheckbox>
          <SkyCheckbox label="已下载" value="1"></SkyCheckbox>
          <SkyCheckbox label="未下载" value="2"></SkyCheckbox>
        </SkyCheckboxGroup>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //多选框
              
            &lt;SkyCheckboxGroup label="产品种类" v-model="checkList1"&gt;
              &lt;SkyCheckbox label="全部" value="0"&gt;&lt;/SkyCheckbox&gt;
              &lt;SkyCheckbox label="天猫" value="1"&gt;&lt;/SkyCheckbox&gt;
              &lt;SkyCheckbox label="淘宝" value="2"&gt;&lt;/SkyCheckbox&gt;
              &lt;SkyCheckbox label="钉钉" value="3"&gt;&lt;/SkyCheckbox&gt;
              &lt;SkyCheckbox label="支付宝" value="4"&gt;&lt;/SkyCheckbox&gt;
            &lt;/SkyCheckboxGroup&gt;
            &lt;SkyCheckboxGroup label="产品状态" v-model="checkList2"&gt;
              &lt;SkyCheckbox label="全部" value="0"&gt;&lt;/SkyCheckbox&gt;
              &lt;SkyCheckbox label="已下载" value="1"&gt;&lt;/SkyCheckbox&gt;
              &lt;SkyCheckbox label="未下载" value="2"&gt;&lt;/SkyCheckbox&gt;
            &lt;/SkyCheckboxGroup&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //多选框
              
              export default {
                data () {
                  return {
                    checkList1: ['0', '1'],
                    checkList2: ['2'],
                  }
                },
                watch: {
                  checkList1 (val) {
                    console.log(val)
                  },
                  checkList2 (val) {
                    console.log(val)
                  },
                }
              }
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        checkList1: ['0', '1'],
        checkList2: ['2'],
      }
    },
    watch: {
      checkList1 (val) {
        console.log(val)
      },
      checkList2 (val) {
        console.log(val)
      },
    }
  }
</script>

<style lang="scss" scoped>
</style>